<template>
    <div class="app">
        app组件:
        <Home></Home>
        <p>{{ message }}</p>
        <button @click="message = '你好'">修改message</button>
    </div>
  </template>

  
  <script>
    /* import { forMe } from "@/api/index";*/
    import { computed } from 'vue'
    import Home from './Home.vue';
    export default {
      //name 指定不重复即可
      name: "index",
      components: {
        //引入组件
        Home
      },
     //provide 函数语法
      provide(){
        return {
            name:'inzv',
            age: 18,
            message: computed(()=>this.message)
        }
      },
      props: [],
      data() {
        return {
          //变量定义 放置数据值，相当于默认值 相似于js中全局变量
          message:" 某一天,你我暮年,静坐庭前,赏花落,笑谈浮生流年"
        };
      },
      activated() {
        //动态加载钩子函数 在该函数内调用的方法会有页面跳转路由
        //会再次重新获得生命周期
      },
      created() {
        //加载钩子函数 组件创建完成没有渲染时触发 获取页面数据 未加载DOM结构
        //相当于 jQ中加载函数
      },
      watch:{
        //监听
      },
      mounted() {
        //组件渲染之后触发 页面已获取数据 并且组件已渲染
  
      },
      methods: {
  
  
      },
    };
  </script>
    <style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
    .app{
        padding: 20px;
        background-color: red;
    }
  </style>
  <style>
    /*全局css 支持css3 可以改变elementUI组件的样式 样式调整在整个系统所有页面生效
      【警告注意: 可能会造成其他页面样式污染 需谨慎使用】 **/
  
  </style>